<template>
  <div>
    <div class="wrap">
      <div class="orderKindsWrap">
        <div class="kindsTitle">
          <img src="@/assets/warning.png" alt="" class="waringImg" />
          <em class="watting">{{
            resMenuInfo.status == 0
              ? "待处理"
              : resMenuInfo.status == 1
              ? "已退款"
              : resMenuInfo.status == 2
              ? "已拒绝"
              : resMenuInfo.status == 3
              ? "已取消"
              : ""
          }}</em>
        </div>
        <div class="explain" v-if="resMenuInfo.status == 0">
          商家需要在{{ resTimeInfo.arriveTime }}分钟内处理该订单，超时该订单自动退款
        </div>
        <div class="explain" v-if="resMenuInfo.status == 1">
          订单金额已原路退回至付款账户
        </div>
      </div>
      <div class="title" v-if="resMenuInfo.status == 2||resMenuInfo.status == 1">处理信息</div>
      <div class="infoList" v-if="resMenuInfo.status == 2||resMenuInfo.status == 1">
        <div class="lineWrap">
          <div class="leftLine">处理时间</div>
          <div class="rightLine">{{ resMenuInfo.proceTime }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">处理方式</div>
          <div class="rightLine">{{resMenuInfo.status == 2?'拒绝退款':resMenuInfo.status == 1?'同意退款':resMenuInfo.status == 3?'用户主动取消售后':''}}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 2">
          <div class="leftLine">拒绝原因</div>
          <div class="rightLine">{{ resMenuInfo.refuseReason }}</div>
        </div>
      </div>
      
      <div class="title">申请信息</div>
      <div class="infoList">
        <div class="lineWrap">
          <div class="leftLine">售后编号</div>
          <div class="rightLine">{{ resMenuInfo.orderNum }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">申请时间</div>
          <div class="rightLine">{{ resMenuInfo.createTime }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">退款原因</div>
          <div class="rightLine">{{ resMenuInfo.refundReason }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">退款金额</div>
          <div class="rightLine">{{ resMenuInfo.totalRefundPrice }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">退款备注</div>
          <div class="rightLine">{{ resMenuInfo.orderRemark }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">退款凭证</div>
          <div class="rightLine"></div>
        </div>
        <div class="lineWrap imgContainer2">
          <img
            :src="$imgUrl + itemImg"
            alt=""
            class="remarkImg"
            v-for="(itemImg, indexImg) in resMenuInfo.imageUrl"
            :key="indexImg"
            @click="jumpImgInfo(itemImg)"
          />
        </div>
      </div>
      <div class="title">商品信息</div>
      <div class="productionList" @click="jumpShopInfo">
        <div class="productionItem">
          <div class="proTitle">
            <div class="proLeft">
              {{ resMenuInfo.shopName }}
              <img src="@/assets/rightArrow.png" alt="" class="rightArrow2" />
            </div>
            <div class="proRight">
              {{
                resMenuInfo.status == 1
                  ? "待接单"
                  : resMenuInfo.status == 2
                  ? "待送达"
                  : ""
              }}
            </div>
          </div>
          <div
            class="proIntroWrap"
            v-for="(item, index) in resMenuInfo.goodsList"
            :key="index"
          >
            <div class="proIntroLeft">
              <img :src="$imgUrl + item.listImgUrl" alt="" class="proPoster" />
            </div>
            <div class="proIntroRight">
              <div class="proIntro">
                {{ item.goodsName }}
              </div>
              <div class="workTime">
                <div class="timeLeft">{{ item.specsName }} ×{{ item.payNum }}</div>
                <div class="saleRight"><em class="moneyLogo">￥</em>188</div>
              </div>
            </div>
          </div>
          <div class="totalCount">
            总价¥{{ resMenuInfo.shouldPrice }} 优惠¥{{ resMenuInfo.disPrice || 0 }}
            <em class="realPay">实付</em>
            <em class="realMoney">￥{{ resMenuInfo.totalPayPrice }}</em>
          </div>
        </div>
      </div>
      <div class="title">订单信息</div>
      <div class="infoList">
        <div class="lineWrap">
          <div class="leftLine">订单编号</div>
          <div class="rightLine">{{ resMenuInfo.orderNum }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">订单优惠</div>
          <div class="rightLine">{{ resMenuInfo.couponName || "无" }}</div>
        </div>
        <div class="lineWrap">
          <div class="leftLine">订单备注</div>
          <div class="rightLine">{{ resMenuInfo.orderRemark || "无" }}</div>
        </div>
        <div class="lineWrap" v-if="resMenuInfo.status == 3">
          <div class="leftLine">取消时间</div>
          <div class="rightLine">{{ resMenuInfo.cancelTime}}</div>
        </div>
        
      </div>
    </div>
    <div class="productRemark" v-if="resMenuInfo.status == 4">
      <div
        v-for="(item_, index_) in resMenuInfo.commentList"
        :key="index_"
        style="margin-bottom: 20px"
      >
        <div class="remarkText">商品评价：{{ item_.content }}</div>
        <div class="imgContainer">
          <img
            :src="$imgUrl + itemImg"
            alt=""
            class="remarkImg"
            v-for="(itemImg, indexImg) in item_.commentImg"
            :key="indexImg"
          />
        </div>
      </div>
    </div>
    <div class="mask" v-show="showMask" @click="showMask = false">
      <img :src="$imgUrl + showImg" alt="" />
    </div>
    <div style="height:100px;"></div>
    <div class="bottomWrap" v-if="resMenuInfo.status == 0&&showMask == false">
      <div class="sureSubmit" @click="newReciveMenu(1)">取消售后</div>
    </div>
  </div>
</template>

<script>
import { Overlay, Field } from "vant";
import {
  apiUserOrderRefundDetails,
  apiTimeSetting,
  apiUpdateRefundOrderStatus,
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      reasonMask: false,
      showMask: false,
      showImg: "",
      id: this.$route.query.menuId,
      resMenuInfo: "",
      resTimeInfo: "",
      refuseText: "", //拒绝理由
    };
  },
  mounted() {
      console.log(123)
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getUserGoodsOrderDetails();
    this.getTimeSetting();
  },
  methods: {

    getTimeSetting() {
      apiTimeSetting({}).then((res) => {
        this.resTimeInfo = res.data;
        console.log("resTimeInfo", this.resTimeInfo);
      });
    },

    getUserGoodsOrderDetails() {
      apiUserOrderRefundDetails({
        id: this.id,
      }).then((res) => {
        this.resMenuInfo = res.data;
        if (this.resMenuInfo.imageUrl != "") {
          this.resMenuInfo.imageUrl = this.resMenuInfo.imageUrl.split(",");
        }
        console.log("resMenuInfo", this.resMenuInfo);
      });
    },

    //放大图片：
    jumpImgInfo(data) {
      this.showImg = data;
      this.showMask = true;
    },

    newReciveMenu() {
      apiUpdateRefundOrderStatus({
        id: this.id,
        status: 3,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success('已取消售后');
          this.$router.push({
            path: "/pages/afterSaleList",
            query: {
              //传递参数
            },
          });
        }
      });
    },

    jumpShopInfo() {
      this.$router.push({
        path: "/pages/shopInfo",
        query: {
          //传递参数
           shopId:this.resMenuInfo.shopId
        },
      });
    },
  },

  created() {},
  components: {
    [Overlay.name]: Overlay,
    [Field.name]: Field,
  },
};
</script>

<style scoped>
/deep/.van-field__control{
    background-color: gainsboro !important;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: 90%;
  background-color: #fff;
  position: fixed;
  height: 40vh;
  top: 25vh;
  left: 5%;
  border-radius: 20px;
}
.sendWrap {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 50px;
}
.dele {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #181818;
  color: #181818;
  font-size: 13px;
  float: left;
}
.sure {
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid #181818;
  color: #fff;
  font-size: 13px;
  background-color: #181818;
  float: right;
}
.textArea {
  margin-top: 15px;
}
.sendComment {
  float: right;
  margin-right: 5%;
  margin-top: 23px;
  background-color: #ff955e;
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 5px;
  color: #fff;
}
.wrap {
  background: #f2f4fa;
  padding: 15px;
  min-height: calc(100vh - 70px);
}
.orderKindsWrap {
  width: calc(100% - 44px);
  background: #ffffff;
  border-radius: 20px;
  padding: 30px 22px;
  margin-bottom: 20px;
}

.kindsTitle {
  font-size: 16px;
  font-weight: bold;
  color: #f9a31f;
  display: flex;
  justify-content: center;
}
.watting {
  /* padding-bottom: 10px; */
  align-items: center;
  display: inline-block;
  margin-top: 8px;
}
.waringImg {
  width: 45px;
  height: 45px;
}
.explain {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
}
.title {
  font-size: 13px;
  font-weight: 400;
  color: #999999;
  margin: 9px 0px;
}
.infoList {
  overflow: hidden;
  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.left {
  float: left;
}
.infoItem {
  height: 20px;
  line-height: 20px;
  display: flex;
  margin-bottom: 15px;
}
.infoItem img {
  width: 17px;
  height: auto;
  align-items: center;
  padding-right: 15.5px;
}
.infoItem em {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
}
.rightArrow {
  float: right;
  width: 5px;
  height: 9px;
  margin-top: 40px;
}

.productionList {
}
.productionItem {
  /* width: calc(95% - 30px);
  margin: 0 auto;
  min-height: 130px;
  background: #ffffff;
  border-radius: 20px;
  padding: 15px;
  margin-top: 15px; */

  width: calc(100% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin-bottom: 20px;
}
.proTitle {
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.proLeft {
}
.proRight {
}
.rightArrow2 {
  width: 5px;
  height: 9px;
  padding-bottom: 1px;
}
.proIntroWrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  height: 75px;
}
.proIntroLeft {
}
.proPoster {
  width: 25%;
  height: 75px;
  position: absolute;
  border-radius: 20px;
}
.proIntroRight {
  width: 65%;
  margin-top: 10px;
}
.proIntro {
  font-size: 10px;
  font-weight: 400;
  color: #181818;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
em {
  font-style: normal;
}
i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.workTime {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  color: #999999;
  margin-top: 15px;
}
.timeLeft {
}
.saleRight {
  color: #ff5757;
  font-size: 15px;
}
.moneyLogo {
  font-size: 10px;
}
.totalCount {
  color: #999999;
  font-size: 13px;
  text-align: right;
  width: 100%;
  margin-top: 20px;
}
.realPay {
  color: #181818;
  padding-left: 10px;
}
.realMoney {
  color: #ff5757;
}
.lineWrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.leftLine {
  font-size: 14px;
  font-weight: 600;
  color: #010101;
}
.rightLine {
  font-size: 14px;
  font-weight: 300;
  color: #010101;
}
.productRemark {
  width: calc(92% - 30px);
  background: #ffffff;
  border-radius: 20px;
  padding: 15px 15px 5px 15px;
  margin: 10px auto;
}
.remarkText {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}
.imgContainer {
}
.remarkImg {
  width: 80px;
  height: 60px;
  margin-right: 15px;
  margin-top: 18px;
  border-radius: 15px;
}
.imgContainer2 {
  margin-top: -15px;
}
.bottomWrap {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: 0px;
}

.sureSubmit {
  float: right;
  margin-right: 15px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 15px;
  text-align: center;
}
.bottomWrap {
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
  position: fixed;
  bottom: 0px;
}

.sureSubmit {
  float: right;
  margin-right: 15px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 15px;
  text-align: center;
}

.sureSubmit2 {
  background-color: #fff;
  border: 1px solid #181818;
  color: #181818;
}
.mask {
  background-color: #000;
  position: fixed;
  top: 0px;
  height: 100vh;
  width: 100vw;
}
.mask img {
  width: 100%;
  margin-top: 15vh;
}
</style>
